<template>
	<div>
		<el-form :inline="true" :model="queryParams" label-width="88px">
			<div class="topNav">
				<el-button type="text" icon="el-icon-search" @click="handleSearch" style="float:right;">搜索</el-button>
			</div>
			<el-form-item label="商品名称" prop="goodsName">
				<el-input v-model="queryParams.goodsName" placeholder="请输入商品名称" clearable size="small" clearable
					@keyup.enter.native="handleSearch" />
			</el-form-item>
			<el-form-item label="品牌" prop="brand">
				<el-select v-model="queryParams.brandId" filterable clearable remote size="small"
					:remote-method="remoteMethod" @change="changeBrand" placeholder="请输入关键词">
					<el-option v-for="item in brandList" :key="item.id" :label="item.nameShow" :value="item.id">
						{{ item.nameShow }}
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="sku" prop="sku">
				<el-input v-model="queryParams.sku" placeholder="sku" clearable size="small" clearable
					@keyup.enter.native="handleSearch" />
			</el-form-item>
			<el-form-item label="电商" prop="supplierId">
				<el-select size="small" v-model="queryParams.supplierId" placeholder="请选择一个电商" filterable clearable>
					<el-option v-for="item in supplierList" :key="item.supplierId" :label="item.supplierName" :value="item.supplierId">
					</el-option>
				</el-select>
			</el-form-item>
		</el-form>

		<el-table ref="multipleTable" v-loading="loading" :data="list" border class="table">
			<el-table-column type="selection" fixed width="55"></el-table-column>
			<el-table-column label="商品名称" align="center" prop="goodsName" width="270">
				<template slot-scope="scope">
					<div class="goods-name">{{ scope.row.goodsName }}</div>
				</template>
			</el-table-column>
			<el-table-column label="审批状态" align="center" prop="suspendState">
				<template slot-scope="scope">
					<span>{{ activityStatus[scope.row.state] }}</span>
				</template>
			</el-table-column>

			<el-table-column label="供应商" align="center" prop="supplierName" width="120">
				<template slot-scope="scope">
					<div class="goods-name supplier-name">{{ scope.row.supplierName }}</div>
				</template>
			</el-table-column>
			<el-table-column label="提交时间" align="center" prop="createTime" />

			<el-table-column label="操作" fixed="right" width="200">
				<template slot-scope="scope">
					<!-- <el-button size="mini" type="text" icon="el-icon-edit" @click="handleListInfo(scope.row)">查看列表
					</el-button> -->

					<el-button v-if="scope.row.state == '2'" size="mini" type="text" icon="el-icon-edit"
						@click="handleFailInfo(scope.row)">查看原因
					</el-button>
					
					<el-button @click="handleInfo(scope.row)" size="mini" type="text" icon="el-icon-edit">
						商品详情
					</el-button>

				</template>
			</el-table-column>
		</el-table>

		<pagination v-show="total > 0 " :total="total" :page.sync="queryParams.pageNum"
			:limit.sync="queryParams.pageSize" @pagination="getList" :pageSizes="[10, 20, 30, 50, 100]" />
		
		<el-dialog title="审批记录" :visible.sync="historyTableVisible" width="80vw">
			<div v-if="fromData.length > 0" style="margin: 20px auto;border-top: 1px solid #ddd;">
				<div class="historyList historyHead">
					<h3 class="item">审批节点</h3>
					<h3 class="item">审批人</h3>
					<h3 class="item">提报人</h3>
					<h3 class="item">审批时间</h3>
					<h3 class="item">审批意见</h3>
					<h3 class="item">审批批注</h3>
				</div>
				<div class="historyList" v-for="(historyData, index) in fromData" :key="index">
					<h3 class="item">
						<el-popover placement="top" trigger="hover">
							<div class="cell-content">{{historyData.taskNodeName}}</div>
							<p class="overflow" slot="reference">{{historyData.taskNodeName}}</p>
						</el-popover>
					</h3>
					<h3 class="item">{{historyData.createBy}}({{historyData.createName}})</h3>
					<h3 class="item">{{historyData.purchaser}}</h3>
					<h3 class="item">{{historyData.createdDate}}</h3>
					<div v-for="(fistoryFormData, indexH) in historyData.formHistoryDataDTO" :key="indexH">
						<!-- <h3 class="item">{{fistoryFormData.title}}</h3> -->
						<h3 class="item">
							<el-popover placement="top" trigger="hover">
								<div class="cell-content">{{fistoryFormData.value}}</div>
								<p class="overflow" slot="reference">{{fistoryFormData.value}}</p>
							</el-popover>
						</h3>
					</div>
				</div>
			</div>
			<el-table :data="gridData" height="60vh" border>
				<el-table-column label="商品名称" align="center" prop="goodsName" width="250">
					<template slot-scope="scope">
						<el-tooltip :content="scope.row.goodsName" placement="bottom" effect="dark"
							class="goodsNameBox">
							<div>{{ scope.row.goodsName }}</div>
						</el-tooltip>
					</template>
				</el-table-column>
			
				<el-table-column label="商品分类" align="center" width="350">
					<template slot-scope="scope">
						{{ scope.row.primaryCategoryName }}
						<span class="divider">/</span>
						{{ scope.row.secondaryCategoryName }}
						<span class="divider">/</span>
						{{ scope.row.tertiaryCategoryName }}
					</template>
				</el-table-column>
				<el-table-column label="计量单位" align="center" prop="saleUnit" />
				<el-table-column label="折扣率" align="center" width="88">
					<template slot-scope="scope">
						{{ discountRateCalc(scope.row) }}
					</template>
				</el-table-column>
				<el-table-column label="优采销售价(元)" align="center" prop="goodsPrice" width="88">
					<template slot-scope="scope">
						<span class="price">
							{{ priceCalc(scope.row.goodsPrice) }}
						</span>
					</template>
			</el-table-column>
				<el-table-column label="优采未税价(元)" align="center" prop="excludeTaxPrice" width="88">
					<template slot-scope="scope">
						{{ priceCalc(scope.row.excludeTaxPrice) }}
					</template>
				</el-table-column>
				<el-table-column label="官网价(元)" align="center" prop="officialPrice">
					<template slot-scope="scope">
						<span class="price">
							{{ scope.row.officialPrice }}
						</span>
					</template>
				</el-table-column>
				<el-table-column label="协议价(元)" align="center" prop="goodsPrice" width="88">
					<template slot-scope="scope">
						<span>
							{{ priceCalc(scope.row.agreementPrice) }}
						</span>
					</template>
				</el-table-column>
				<el-table-column label="电商未税价(元)" align="center" prop="excludeTaxPrice" width="88">
					<template slot-scope="scope">
						<span>
							{{ priceCalc(scope.row.initExcludeTaxPrice) }}
						</span>
					</template>
				</el-table-column>
				<el-table-column label="品牌" align="center" prop="brandName" width="180" />
				<el-table-column label="sku" align="center" prop="sku" width="150" />
				<el-table-column label="库存" align="center" prop="goodsStock" />
				<el-table-column label="供应商" align="center" prop="supplierName" width="200" />
				<el-table-column label="导入时间" align="center" prop="createTime" width="100" />
			</el-table>
			<span slot="footer" class="dialog-footer">
				<el-button type="primary" @click="historyTableVisible = false">关 闭</el-button>
			</span>
		</el-dialog>
		
		<el-dialog :title="detailTitle" :visible.sync="dialogDetailVisible" width="80vw" v-loading="dialogLoading">
			<goodsInfoBox ref="info" :info="info" :disabel="disabel"></goodsInfoBox>
			<template slot="footer" class="dialog-footer">
				<el-button size="mini" type="text" @click="handleGoodsClose(info)">关闭
				</el-button>
			</template>
		</el-dialog>
	</div>
</template>

<script>
	import { pushHistory, pushHistoryAll } from "@/api/supplierActivity/task"
	import { supplierList } from '@/api/supplierActivity/supplier'
	import { searchBrands } from "@/api/brand.api";
	import { pushHistoryList , goodsInfo} from "@/api/activiti/goods";
	import { historyFromDataV2 } from '@/api/activiti/supplierHistoryFormdata';
	import goodsInfoBox from "@/views/supplierActivity/components/goodsInfoBox"
	import tools from "@/tools";

	export default {
		name: "pushHistory",
		components: {
			goodsInfoBox
		},
		data() {
			return {
				loading: true,
				list: [],
				brandList: [],
				supplierList: [],
				activityStatus: this.$config.activityStatus,
				activityFilters: this.$config.activityFilters,
				queryParams: {
					pageNum: 1,
					pageSize: 10,
					brandId: undefined,
					goodsName: undefined,
					sku: undefined,
					supplierId: undefined
				},
				total: 0,
				dialogTableVisible: false,
				gridData: [],
				fromData: [],
				historyTableVisible: false,
				dialogDetailVisible: false,
				dialogLoading: false,
				detailTitle: "",
				info: {},
				disabel: true
			}
		},
		mounted() {
			this.getList();
			this.getSupplierList();
		},
		methods: {
			getList() {
				this.loading = true;
				let callListApi = pushHistory;
				if(this.checkPermissions("goodsItemPushAll")) {
					callListApi = pushHistoryAll;
				}
				callListApi(this.queryParams).then(res => {
					this.list = res.rows
					this.total = res.total
					this.loading = false
				})
			},
			handleSearch() {
				this.getList();
			},
			/** 获取电商列表 */
			getSupplierList() {
				supplierList().then(res => {
					this.supplierList = res;
				})
			},
			changeBrand(brand) {
				this.brandList.map(row => {
					if (row.id == brand) {
						this.queryParams.brandId = row.id
					}
				})
			},
			remoteMethod(query) {
				if (query !== '') {
					searchBrands(query).then(res => {
						this.brandList = res
					})
				}
			},
			handleListInfo(row) {
				this.gridData = [];
				pushHistoryList(row.goodsListId).then(res => {
					this.gridData = res;
					this.dialogTableVisible = true;
				})
			},
			priceCalc(price) {
				if (price) return price.toFixed(2);
			},
			// 计算折扣率
			discountRateCalc(row) {
				const goodsPrice = row.agreementPrice
				const officialPrice = row.officialPrice
				if (goodsPrice == "" || goodsPrice == 0 || goodsPrice == null || goodsPrice == undefined) {
					return ""
				}
				if (officialPrice == "" || officialPrice == 0 || officialPrice == null || officialPrice == undefined) {
					return "";
				}
				return (tools.accDiv(goodsPrice, officialPrice) * 100).toFixed(2) + "%"
			},
			handleFailInfo(row) {
				this.getHistoryList(row.instanceId);
				this.handleListInfo(row)
			},
			getHistoryList(instanceId) {
				historyFromDataV2(instanceId).then(response => {
					this.fromData = response
					this.historyTableVisible = true
				})
			},
			handleInfo(row) {
				this.info = {};
				this.dialogLoading = true;
				this.dialogDetailVisible = true;
				this.detailTitle = `${row.goodsName} : ${row.sku}`
				this.disabel = true
				goodsInfo(row.supplierId, row.sku).then(res => {
					this.info = res;
					if (res.goodsImageList) {
						this.imgList = res.goodsImageList.split(',');
					}
					this.dialogLoading = false;
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.goods-name {
		width: 250px;
		height: 25px;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;

		&.supplier-name {
			width: 100px;
		}
	}

	.price {
		color: #ff4d4f;
	}

	.goodsNameBox {
		width: 100%;
		overflow: hidden;
		text-align: center;
		height: 25px;
	}
	
	.historyHead {
		background: #f5f7fa;
	}
	
	.historyList {
		width: 100%;
		overflow: hidden;
		border-left: 1px solid #ddd;
		border-bottom: 1px solid #ddd;
	
		.item {
			float: left;
			width: calc(100% / 6);
			border-right: 1px solid #ddd;
			height: 35px;
			line-height: 35px;
			text-align: center;
		}
	}
	
</style>
